<template>
    <div>
      <Header></Header>

      <div class="shopping-cart-wrap">
        <h3 class="shopping-cart-title">
          我的购物车
          <small>共
            <span>1</span>
            门课程
          </small>
        </h3>

        <div class="cart_table">
          <div class="cart_header_row">
            <span class="doing-more"></span>
            <span class="course-row">课程</span>
            <span class="expire-row">有效期</span>
            <span class="price-row">单价</span>
            <span class="do-row">操作</span>
          </div>

          <div class="cart-course-list">
            <div>
              <cart-item :course="course"
                         v-for="(course, key) in course_list"
                         :key="course.course_id"
                         @deleteHander="deleteCourse(key)"
                         @changeSelect="calc_total"
              ></cart-item>

            </div>
          </div>

          <!-- 计算金钱页面 -->
          <div class="cart-footer">
            <span class="cart-select">
              <el-checkbox v-model="checked">&nbsp;&nbsp;&nbsp;&nbsp;全选</el-checkbox>
            </span>
            <span class="cart-delete">
              <i class="el-icon-delete"></i> &nbsp;&nbsp;删除
            </span>
            <div class="cart-money">
              <span class="cart-total">总计：<i>{{ total }}</i></span>
              <span class="goto_pay" @click="calc_total">
                <router-link :to="{ name: 'order' }">去结算</router-link>
              </span>
            </div>
          </div>
        </div>
      </div>

      <Footer></Footer>
    </div>
</template>

<script>
  import Header from './common/Header'
  import Footer from './common/Footer'
  import CartItem from './common/CartItem'

  export default {
    name: "Cart",
    data () {
      return {
        checked: false,
        course_list: [],
        total: 0
      }
    },
    components: {
      Header,
      Footer,
      CartItem
    },
    created() {
      this.get_cart_list();
      // this.calc_total();
      console.log('hhh')
    },
    methods: {
      get_cart_list () {
        let token = '';
        // if (localStorage.token !== "null") {
        //   token = localStorage.token;
        // }
        // if (sessionStorage.token !== "null") {
        //   token = sessionStorage.token;
        // }
        if (localStorage.token) {
          token = localStorage.token;
        }
        if (sessionStorage.token) {
          token = sessionStorage.token;
        }

        if (!token) {
          this.$confirm("对不起，你还没有登录")
          .then(() => {
            this.$router.push({
              name: 'login'
            })
          })
        }

        this.$axios.get(`${this.$settings.Host}/cart/`, {
            headers: {
              // 不加上这个，没法通过身份验证
              "Authorization": "jwt " + token
            }
          })
          .then(res => {
            this.course_list = res.data;
            // 页面刚加载完，就计算总价格
            this.calc_total();
          })
          .catch(err => {
            console.log(err)
          })
      },

      deleteCourse(key){
        // 移除执行下标的数组成员
        // 数组.splice(下标,长度)
        // this.course_list.splice(key,1);
        this.course_list.splice(key,1);
        // 删除课程过后，还要重新计算一次总价格
        this.calc_total();
      },

      calc_total(){
          // 计算购物车中勾选商品的总价
          let total = 0;
          for(let i = 0; i < this.course_list.length; i++){
              console.log(this.course_list[i]);
              if(this.course_list[i].selected){
                  total += this.course_list[i].price
              }
          }
          this.total = total;
      },

      change_expire(course,course_index){
        // 子组件中修改课程有效期以后，同步父组件的代码
        this.course_list[course_index] = course;
        this.calc_total()
      }
    }

  }
</script>

<style scoped>
  .shopping-cart-wrap {
    width: 1200px;
    margin: 0 auto;
  }
  .shopping-cart-wrap .shopping-cart-title {
    font-size: 18px;
    color: #666666;
    margin: 25px 0;
    font-family: PingFangSC-Regular,serif;
  }
  .shopping-cart-title small {
    font-size: 12px;
    color: #d0d0d0;
    /*display: inline-block;*/
    font-family: PingFangSC-Regular,serif;
  }

  .cart_table .cart_header_row {
    height: 80px;
    line-height: 80px;
    background-color: #f7f7f7;
  }
  .cart_table .cart_header_row span {
    float: left;
    height: 100%;
    box-sizing: border-box;
    padding-left: 10px;
  }
  .cart_table .cart_header_row .doing-more {
    width: 8%;
  }
  .cart_table .cart_header_row .course-row {
    width: 45%;
  }
  .cart_table .cart_header_row .expire-row {
    width: 16%;
  }
  .cart_table .cart_header_row .price-row {
    width: 16%;
  }
  .cart_table .cart_header_row .do-row {
    width: 15%;
  }

  .cart-footer {
    width: 100%;
    height: 80px;
    background-color: #f7f7f7;
    line-height: 80px;
    margin-bottom: 100px;

  }
  .cart-footer span {
    float: left;
    box-sizing: border-box;
  }
  .cart-footer .cart-select {
    width: 12%;
    padding-left: 40px;
  }
  .cart-footer .cart-money {
    float: right;
  }
  .cart-footer .cart-delete {
    margin-left: 30px;
  }
  .cart-footer .cart-total {
    font-size: 18px;
    color: #666;
    font-family: PingFangSC-Regular,serif;
    margin-right: 65px;
  }
  .cart-footer .goto_pay {
    width: 159px;
    height: 80px;
    text-align: center;
    background: #ffc210;
    font-size: 18px;
    color: #fff;
    font-family: PingFangSC-Regular,serif;
  }


</style>
